<template>
  <!-- 子报告组件 -->
  <div class="zibogbox">
    <!-- 子报告页面搜索栏 -->
    <div class="zitopbox">
      <div class="little">
        <span class="text">用电单位</span>
        <span>
          <el-select v-model="form.orgNo" size="small" clearable filterable  placeholder="请选择用户" style="width: 75%;" :disabled="form.trialNo?true:false">
            <el-option v-for="(item,index) in yonghulist" :key="index" :label="item.bizOrgName" :value="item.bizOrgNo" class="option"></el-option>
          </el-select>
        </span>
      </div>
      <div class="little">
        <span class="text">报告编号</span>
        <span>
          <el-input v-model="form.trialNo" disabled placeholder="保存后自动生成报告编号" style="width: 75%;" size=small></el-input>
        </span>
      </div>
      <div class="little">
        <span class="text">试验名称</span>
        <span>
          <el-input v-model="form.trialName" placeholder="请输入试验名称" style="width: 75%;" size=small></el-input>
        </span>
      </div>
      <div class="little">
        <span class="text">试验日期</span>
        <span>
          <el-date-picker
            size=small
            value-format="yyyy-MM-dd"
            v-model="form.trialDate"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </span>
      </div>
      <div class="little">
        <span class="text">录入人员</span>
        <span>
          <el-input v-model="form.createrName" disabled placeholder="保存后自动生成录入人员" style="width: 75%;" size=small></el-input>
        </span>
      </div>
      <div class="little">
        <span class="text">录入日期</span>
        <span>
          <el-date-picker
            disabled
            style="width: 75%;"
            value-format="yyyy-MM-dd HH:mm:ss"
            size="small"
            v-model="form.createTime"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </span>
      </div>
      <div class="little">
        <el-button @click="baocunzhubaogao" size="small" type="primary">保 存</el-button>
      </div>
    </div>
    <!-- 子报告页面主体 -->
    <div class="bodybox">
      <div>
        <el-button style="margin-right: 10px;" @click="$emit('callback')" size="small" type="primary"><i class="el-icon-caret-left"></i> 返回主报告</el-button>
        <el-dropdown @command="handleCommand">
          <el-button size="small" type="primary"><i class="el-icon-plus"></i> 新增</el-button>
            <el-dropdown-menu slot="dropdown" >
              <el-dropdown-item v-for="(item,index) in shiyanlist" :key="index" :command="item.value" style="padding: 0 10px;" ><span >{{ item.text }}</span></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
      </div>
      <div class="table">
          <TableColumn
          ref="tabledata"
          :tableData="tableData" 
          :tableConfig="tableConfig">
          <!-- documentName        { label: '附件', prop: 'attachmentList', center: 'center' } -->
          <el-table-column
          label="附件">
            <template #default="{ row }">
              <div>
                <p @click="xiazai(item)" style="color: #1890ff;cursor: pointer;"
                 v-for="(item,index) in row.attachmentList" :key="index">{{ item.documentName }}
                </p>
              </div>
            </template>
          </el-table-column>
          <el-table-column
              prop="address"
              label="操作"
              align="center"
              width="250">
              <template #default="{row}">
                <!-- <el-tooltip class="item" effect="dark" content="编辑" placement="top"> -->
                  <i @click="bianji(row)" v-if="zhibaogaobutton" class="el-icon-edit" style="color:#1a90fe ;margin-right: 20px; cursor: pointer;"></i>
                <!-- </el-tooltip> -->
                <!-- <el-tooltip class="item" effect="dark" content="详细" placement="top"> -->
                  <i @click="liulan(row)" class="el-icon-view" style="color: #1a90fe;cursor: pointer;margin-right: 20px;"></i>
                <!-- </el-tooltip> -->
                <!-- <el-tooltip class="item" effect="dark" content="下载报告" placement="top"> -->
                  <i  @click="xiazaibaogao(row)" class="iconfont icon-xiazai" style="color: #1a90fe;cursor: pointer;margin-right: 15px;font-size: 20px;"></i>
                <!-- </el-tooltip> -->
                <!-- <el-tooltip class="item" effect="dark" content="删除" placement="top"> -->
                  <i @click="shanchu(row)" v-if="zhibaogaobutton" class="el-icon-delete" style="color: red;cursor: pointer;"></i>
                <!-- </el-tooltip>   -->
              </template>
            </el-table-column>
          </TableColumn>
        </div>
        <!-- 底部分页 -->
        <div class="fenye">
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page.sync="pageobj.pageNo"
            :page-size="20"
            @current-change="getdatalist"
            :total="+totalCount">
          </el-pagination>
        </div>
    </div>
    <!-- 新增子报告弹窗 -->
    <div class="fialog">
      <el-dialog
        :title="dialogtitle"
        center
        :visible.sync="dialogVisible"
        width="55%">
        <div class="shangxia">
          <el-form :model=zibaogaoform label-position="right" label-width="100">
              <div v-for="(item,index) in formlist" :key="index" class="twobox">
              <div class="texth">{{ item.text }}</div>
              <div v-for="(itemtwo,indextwo) in item.children" :key="indextwo" class="threebox">
                <div><span class="bluebgc"></span> <span class="bluetext">{{ itemtwo.text }}</span></div>
                <div class="clearfix" style="padding: 10px;">
                  <el-col :span="12" v-for="(itemthree,indexthree) in itemtwo.children" :key="indexthree">
                    <el-form-item :label="itemthree.trialProjectName" >
                      <el-input v-if="itemthree.dataType=='1'" v-model="itemthree.value" :placeholder="`请输入${itemthree.trialProjectName}`" style="width: 100%;" size="small">
                        <span slot="suffix">{{ itemthree.unit }}</span>
                      </el-input>
                      <el-select @change="changeselect($event,itemthree)" ref="refselect" v-if="itemthree.dataType=='2'" v-model="itemthree.value" :placeholder="`选择${itemthree.trialProjectName}`" size="small" style="width: 100%;">
                        <el-option v-for="(itemselect,indexselect) in itemthree.arr" :key="indexselect" :label="itemselect.text" :value="itemselect.value" class="option">
                      </el-option>
                      </el-select>
                      <el-date-picker v-if="itemthree.dataType=='5'" v-model="itemthree.value" value-format="yyyy-MM-dd" size="small" style="width: 100%;" type="date" :placeholder="`选择${itemthree.trialProjectName}`">
                      </el-date-picker>
                      <el-date-picker v-if="itemthree.dataType=='6'" v-model="itemthree.value"  value-format="yyyy-MM-dd HH:mm:ss" type="datetime" :placeholder="`选择${itemthree.trialProjectName}`" size="small" style="width: 100%;">
                      </el-date-picker>
                      <el-select v-if="itemthree.dataType=='3'" v-model="itemthree.convertValue" :placeholder="`选择${itemthree.trialProjectName}`" size="small" ref="device"  style="width: 100%;">
                        <el-option class="option" :label="itemthree.convertValue" value="value" style="height: auto">
                              <el-tree ref="tree" :props="props" :highlight-current="true" :load="loadNodedevice" lazy
                              @node-click="(data, node, item) => handleNodeClickdevice(data, node, item, itemthree)">
                            </el-tree>
                          </el-option>
                      </el-select>
                      <el-select v-if="itemthree.dataType=='4'" v-model="itemthree.convertValue" :placeholder="`选择${itemthree.trialProjectName}`" size="small" ref="propeo"  style="width: 100%;">
                        <el-option class="option" :label="itemthree.convertValue" value="value" style="height: auto">
                              <el-tree ref="tree" :props="propss" :highlight-current="true" :load="loadNodes" lazy
                              @node-click="(data, node, item) => handleNodeClicks(data, node, item, itemthree)">
                            </el-tree>
                          </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </div>
              </div>
             </div>
             <div v-if="zibaogaoid" >
              <div style="font-size: 18px;color: #323232;font-weight: bold;">附件</div>
              <el-col :span="12">
                <el-form-item label="附件:" style="padding-left: 20px;margin-bottom: 20px;">
                <el-upload
                  class="upload-demo"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :on-remove="handleChange"
                  :on-success="handleSuccess"
                  :file-list="fileList">
                  <el-button size="small" type="primary" style="width: 60px;height:30px ;" >点击上传</el-button>
                </el-upload>
              </el-form-item>
              </el-col>
          </div>
          </el-form>
        </div>
        <span slot="footer" >
          <el-button class="button" @click="zhibaogaoquxiao">取 消</el-button>
          <el-button class="button" type="primary" @click="zibaogaoqueren">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 浏览子报告组件 -->
    <div>
      <ChildrenRowse ref="ChildrenRowse" :liulanchildren=liulanchildren :orgNo=form.orgNo></ChildrenRowse>
      <ChildrenCable ref="ChildrenCable" :liulanchildren=liulanchildren :orgNo=form.orgNo></ChildrenCable>
      <ChildrenVacuum ref="ChildrenVacuum" :liulanchildren=liulanchildren :orgNo=form.orgNo></ChildrenVacuum>
      <ChildrenPressure ref="ChildrenPressure" :liulanchildren=liulanchildren :orgNo=form.orgNo></ChildrenPressure>
    </div>
  </div>
</template>

<script>
import { getgenjiedianapi, getzijidianapi} from '@/api/monitor'
import {getgengjiedianapi,getzhuzhijigouapi,getuserlistapis} from '@/api/subscribe'
import {getzidianxialaapi} from '@/api/guidelines'
import {getchushihuazibaogaoapi,postbaocunzhubaogaoapi,getzhibaogaolistapi,postuploadfujianapi,
  delzhibaogaoapi,postshiyanzhibaogaoapi,postuploadapi} from '@/api/Experimental-report/Main-information'
import { getDictionaryApi } from '@/api/customerFile'
import TableColumn from '@/components/Table/index.vue'
import { getuserlistapi } from '@/api/analysis'
import { ExportPdf } from '@/utils/exportpdf'
import download from 'js-file-download';
import ChildrenRowse from './ChildrenRowse.vue'
import ChildrenCable from './ChildrenCable.vue'
import ChildrenVacuum from './ChildrenVacuum.vue'
import ChildrenPressure from './ChildrenPressure.vue'
export default {
  name: 'CallPoliceChildrenReport',
  props: {
    zhibaogaoform: {
      type: Object,
    },
    zhibaogaobutton: {
      type:Boolean,
    }
  },
  components: {
    TableColumn,
    ChildrenRowse,
    ChildrenCable,
    ChildrenVacuum,
    ChildrenPressure
  },
  data() {
    return {
      liulanchildren:{},
      propss: {
        label: 'orgName',
        disabled:'disabled'
      },
      props: {
        label: 'name',
        children: 'children',
        isLeaf: 'leaf'
      },
      fileList: [],
      uploadFilelist:[],
      zibaogaoform:{},
      dialogtitle:'',
      dialogVisible:false,
      tableData:[],
      yonghulist:[],
      form:{orgNo:'',trialNo:'',trialName:'',trialDate:'',createrName:'',createTime:''},
      tableConfig: [
        { label: '报告编号',prop:'trialNo',width:'280'},
        { label: '报告类型', prop: 'trialTypeName' },
        { label: '试验设备/工程名称', prop: 'deviceName' },
        { label: '试验日期', prop: 'trialDate' ,center:'center'},
        { label: '结论', prop: 'trialResultName' },
      ],
      totalCount: '',
      pageobj: {
        pageNo: 1,
        pageSize:20
      },
      shiyanlist: [],
      formlist:[],
      trialType: '',
      deviceName:'',
      zibaogaoid:''
    };
  },

  async mounted() {
    // 获取用户
    const { data: { list } } = await getuserlistapi()
    this.yonghulist = list
    // 获取试验类型
    const res = await getDictionaryApi('SYGL_SYLX', '')
    res.data.list.forEach(ele=>ele.text='新增'+ele.text)
    this.shiyanlist = res.data.list
    this.form = { ...this.zhibaogaoform }
    if (!this.form.trialDate) this.gettime()
    if(this.form.id) this.getdatalist(this.form.id)
  },

  methods: {
    // 下拉菜单选择
    changeselect(row, params) {
      const obj = params.arr.filter(ele => ele.value == row)[0]
      this.$set(params, 'value', obj.value)
      this.$set(params, 'convertValue', obj.text)
    },
    // 人员树节点点击
    handleNodeClicks(data, node, self, params) {
      this.$set(params, 'value', data.userNo)
      this.$set(params, 'convertValue', data.orgName)
      this.$refs.propeo.map((ele,index) => {
        const text=ele.cachedPlaceHolder.slice(2)
        if (text == params.trialProjectName) {
          this.$refs.propeo[index].blur()
        }
      })
    },
    //  设备树节点点击
    handleNodeClickdevice(data, node, self, params) {
      this.$set(params, 'value', data.id)
      this.$set(params, 'convertValue', data.name)
      this.$refs.device.map((ele,index) => {
        const text=ele.cachedPlaceHolder.slice(2)
        if (text == params.trialProjectName) {
          this.$refs.device[index].blur()
        }
        if (params.trialProjectName == '设备名称') {
          this.deviceName=data.name
        }
      })
    },
    // 浏览
    liulan(row) {
      this.liulanchildren=row
      if (row.trialTypeName == '变压器试验') {
        this.$refs.ChildrenRowse.dialogVisible=true
      } else if (row.trialTypeName == '电力电缆试验') {
        this.$refs.ChildrenCable.dialogVisible=true
      } else if (row.trialTypeName == '真空断路器试验') {
        this.$refs.ChildrenVacuum.dialogVisible=true
      } else if (row.trialTypeName == '高压柜试验') {
        this.$refs.ChildrenPressure.dialogVisible=true
      }
    },
    // 子报告新增确认
   async zibaogaoqueren() {
      let childProjectList = [];
       for(let i=0; i<this.formlist.length;i++){
        for(let j=0; j<this.formlist[i].children.length;j++){
          childProjectList.push(this.formlist[i].children[j])
        }
       }
       let array=[]
       for(let i=0; i<childProjectList.length;i++){
         for (let j = 0; j < childProjectList[i].children.length; j++){
           const { id, value, dataType, convertValue,childProjectId } = childProjectList[i].children[j];
           const obj = {
             projectId: id, 
              value: value
            };
            if (dataType === "3" || dataType === "4"||dataType === "2") {
              obj.convertValue = convertValue;
           }
           if (this.zibaogaoid) {
             obj.id = childProjectId
             obj.childId=this.zibaogaoid
            }
            array.push(obj);
        }
      }
       const trialResultName=array.filter(ele=>ele.projectId=='874'||ele.projectId=='837'||ele.projectId=='764'||ele.projectId=='816')[0]?.value
       const trialTypeName=this.shiyanlist.filter(ele=>ele.value==this.trialType)[0].text.slice(2)
       await postshiyanzhibaogaoapi({
        baseId:this.form.id, childProjectList:array,trialDate:this.form.trialDate,trialNo:this.form.trialNo,deviceName:this.deviceName,
        trialTypeName ,trialType:this.trialType,trialResultName:trialResultName=='1'?'合格':trialResultName=='0'?'不合格':'',
        id:this.zibaogaoid
       }).then(res => {
         this.$message({
           type: res.code == '200' ? 'success' : 'warning',
          message:res.data.content
        })
       })
     //  保存附件
     for (let i = 0; i < this.fileList.length; i++) {
       await postuploadapi(this.zibaogaoid,{uploadFile:this.fileList[i].raw})
      }
      this.deviceName=''
     this.zhibaogaoquxiao()
      this.getdatalist(this.form.id)
    },
    // 下载附件
    async xiazai(item) {
      await postuploadfujianapi({ id: item.id }).then(res => {
        // console.log(res);
        const blob = new Blob([res]);
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        console.log(blob,url,link);
        link.href = url;
        link.download = `${item.documentName}`;
        link.click();
        // download(res, `image.jpg`);
      })
    },
    //上茶附件成功
    async handleSuccess(data,val,fileList){
      this.fileList = fileList.slice(-3);
      console.log(this.fileList);
    },
    // 删除附件
    handleChange(file, fileList) {
      // this.uploadFilelist=this.uploadFilelist.filter(ele=>ele.name!==file.name)
      },
    // 子报告取消
    zhibaogaoquxiao(){
      this.formlist = []
      this.zibaogaoid=''
      this.dialogVisible = false
    },
    // 保存实验主报告
    async baocunzhubaogao() { 
      const orgName=this.yonghulist.filter(ele=>ele.bizOrgNo==this.form.orgNo)[0].bizOrgName
      const { data, code } = await postbaocunzhubaogaoapi({
        id: this.form.id, orgNo: this.form.orgNo, orgName,
        trialDate: this.form.trialDate, trialName: this.form.trialName
      })
      this.form={...data.entity}
      this.$message({
        type: code == '200' ? 'success' : 'warning',
         message:data.content
      })
    },
    // 获取子报告表格信息
    async getdatalist(id) {
      this.$refs.tabledata=true
      const { data: { list,totalCount } } = await getzhibaogaolistapi({
        _pageNo: this.pageobj.pageNo - 1, _pageSize: this.pageobj.pageSize,baseId:id
      })
      this.totalCount = totalCount
      this.tableData = list
      this.$refs.tabledata=false
    },
    // 编辑子报告
    async bianji(row) {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        target: document.querySelector('.shangxia')
      });
      this.dialogVisible = true
      this.trialType=row.trialType
      this.zibaogaoid = row.id
      this.dialogtitle = this.shiyanlist.filter(ele => ele.value == row.trialType)[0].text.slice(2)
      this.fileList = row.attachmentList.map(ele => {
        const { documentName, ...obj } = ele
        return {
          name: documentName,
          obj
        }
      })
      const { data: { list } } = await getchushihuazibaogaoapi({ id: row.id, orgNo: this.form.orgNo, trialType: row.trialType })
      for (let i = 0; i < list.length; i++) {
        for(let j = 0; j < list[i].children.length; j++) {
          for (let k = 0; k < list[i].children[j].children.length; k++) {
              if(list[i].children[j].children[k].selectCode){
                const res=await getzidianxialaapi({dictType:list[i].children[j].children[k].selectCode})
                list[i].children[j].children[k]['arr']=res.data.list
            }
            if (list[i].children[j].children[k].trialProjectName=='设备名称') {
                this.deviceName=list[i].children[j].children[k].convertValue
              }
          }
        }
      }
      this.formlist = list
      loading.close();
    },
    // 下载子报告
    xiazaibaogao(row) {
      ExportPdf('pio-microservice-biz/pio/trial-report/child/download/pdf',{id:row.id},`${row.trialTypeName}实验子报告`)
    },
    // 删除子报告
    shanchu(row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await delzhibaogaoapi({ id: row.id }).then(ele => {
            this.$message({
              type: ele.code == '200' ? 'success' : 'warning',
              message:ele.data.content
            })
          })
          this.getdatalist(this.form.id)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 新增子报告
    async handleCommand(val) {
      if (!this.form.trialNo) return this.$message.warning('请先维护主报告信息')
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        target: document.querySelector('.shangxia')
      });
      this.trialType=val
      this.dialogVisible = true
      this.dialogtitle=this.shiyanlist.filter(ele=>ele.value==val)[0].text.slice(2)
      const {data:{list}} = await getchushihuazibaogaoapi({ id:'', orgNo: this.form.orgNo, trialType: val })
       for (let i = 0; i < list.length; i++) {
        for(let j = 0; j < list[i].children.length; j++) {
          for (let k = 0; k < list[i].children[j].children.length; k++) {
              if(list[i].children[j].children[k].selectCode){
                const res=await getzidianxialaapi({dictType:list[i].children[j].children[k].selectCode})
                list[i].children[j].children[k]['arr']=res.data.list
              }
          }
        }
      }
      this.formlist = list
      loading.close();
    },
  // 人员树组件懒加载
   async loadNodes(node, resolve) {
      const res = await getgengjiedianapi()
      if (node.level === 0) { // 初始的级数（最顶层）
        const array = [res.data.entity]
        array.forEach(ele => {
          ele.disabled = true
        })
        return resolve(array) // 最顶层数据渲染为region
      }
      const ress = await getzhuzhijigouapi({ parentOrgNo: res.data.entity.orgNo })
      if (node.level === 1) {
        // node.disabled = true;
        ress.data.list.forEach(ele => {
          ele.disabled = true
        })
        return resolve(ress.data.list)
      } else if (node.level === 2) {
        const resss=await getuserlistapis({deptNo:node.data.orgNo})
        const newData = resss.data.list.map(obj => {
          return Object.keys(obj).reduce((acc, key) => {
            acc[key === 'userName' ? 'orgName' : key] = obj[key];
            return acc;
          }, {});
        });
        return resolve(newData)
      } else {
        return resolve([])
      }
    },
    // 设备树组件懒加载
    async loadNodedevice (node, resolve) {
      const res = await getgenjiedianapi({ treeModel: 'DeviceManageTree' })
      // const res = await getzijidianapi()
      const ress = await getzijidianapi(res.data.list[0])
      if (node.level === 0) { // 初始的级数（最顶层）
        return resolve(ress.data.list) // 最顶层数据渲染为region
      }
      if (node.level === 1) {
        const ress = await getzijidianapi(node.data)
        return resolve(ress.data.list)
      } else if (node.level === 2) {
        const ress = await getzijidianapi(node.data)
        return resolve(ress.data.list)
      } else if (node.level === 3) {
        const ress = await getzijidianapi(node.data)
        return resolve(ress.data.list)
      } else if (node.level === 4) {
        const ress = await getzijidianapi(node.data)
        return resolve(ress.data.list)
      } else if (node.level === 5) {
        const ress = await getzijidianapi(node.data)
        return resolve(ress.data.list)
      } else if (node.level === 6) {
        const ress = await getzijidianapi(node.data)
        return resolve(ress.data.list)
      }
    },
    // 获取当前时间戳
     gettime() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const mon = date.getMonth() + 1 // 月
      const month =mon<10?'0'+mon:mon
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() //日
      let hours = date.getHours();
      let minutes = date.getMinutes();
      let seconds = date.getSeconds();
      this.form.trialDate=year+'-'+month+'-'+day
      this.form.createTime=year+'-'+month+'-'+day+' '+hours+':'+minutes+':'+seconds
    },
  },
};
</script>

<style scoped>
 .option{
  padding-left: 10px;
 }
 .zibogbox{
  height: 100%;
  .zitopbox{
    height: 120px;
    background-color: #fff;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
    .little{
      width: 20%;
      .text{
        font-size: 14px;
        color: #606266;
        margin-right: 10px;
      }
      .button{
        width: 60px;
        height: 30px;
        background-color: #3b8eea;
        color: #fff;
        border-radius: 3px;
        border: none;
      }
    }
  }
  .bodybox{
    height: calc(100% - 130px);
    background-color: #fff;
    padding: 20px;
    .button{
        width: auto;
        height: 30px;
        background-color: #3b8eea;
        color: #fff;
        border-radius: 3px;
        border: none;
        padding: 0 10px;
        margin-right: 10px;
    }
    .table{
      height: 88%;
      margin: 10px 0;
    }
    .fenye{
      text-align: right;
    }
  }
  .fialog{
    .shangxia{
      height: 500px;
      overflow: auto;
      border-bottom: 1px solid #ccc;
      .twobox{
        padding: 15px 0;
        .texth{
              font-size: 18px;
              font-weight: bold;
              color: #323232;
            }
        .threebox{
          padding: 10px;
            .bluebgc{
              display: inline-block;
              width: 5px;
              height: 16px;
              background-color: #187cf5;
              margin-right: 10px;
              border-radius: 3px;
              vertical-align: middle;
            }
            .bluetext{
              display: inline-block;
              vertical-align: middle;
              font-size: 18px;
              color: #323232;
            }
        }
      }
    }

  }
  .button{
      width: auto;
      height: 30px;
      padding: 0 10px;
    }
 }
 .clearfix::after {
  content: "";
  clear: both;
  display: table;
}
::v-deep .el-form-item{
  display: flex;
  margin-right: 10px;
}
::v-deep .el-form-item__content{
  flex:1;
}
</style>